<template>
    <div class="user">
        <div class="user-info" v-if="isLogin">
            <div class="avatar">
                <van-image
                    round
                    width="100%"
                    height="100%"
                    fit="cover"
                    src="https://avatar2.pddpic.com/a/Q0ViY3dwbFEyZkFSQVFMa3h3S2ZzQ2p6TWtxcE96SlprZz09djA0-1612313183?imageMogr2/thumbnail/200x"
                />
            </div>

            <div class="info">
                <p class="title"><span>会飞的小猪^O^</span></p>
                <p class="medal">
                  <span>勋章墙</span>
                  <van-icon name="arrow" />
                </p>
            </div>
        </div>

        <div class="login">
        <van-tabs v-model="active">
            <van-tab title="登录">
                <van-form @submit="onSubmit">
                    <van-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="请输入用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="请输入密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit" @click="handelLogin" >登录</van-button>
                    </div>
                </van-form>

            </van-tab>
            <van-tab title="注册">
                <van-form @submit="onSubmit">
                    <van-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="请输入用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="请输入密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                            v-model="sms"
                            center
                            clearable
                            label="短信验证码"
                            placeholder="请输入短信验证码"
                    >
                        <template #button>
                            <van-button size="small" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>

                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit" @click="handelSkip">注册</van-button>
                    </div>
                </van-form>
            </van-tab>
        </van-tabs>
     </div>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return{
                active:0,
                username:"",
                password:"",
                sms:"",
                isLogin:false,
            }
        },
        methods:{
            onSubmit(values){
                console.log('submit', values);
            },
            handelLogin(){
                this.isLogin=!this.isLogin
            },
            handelSkip(){
                this.active=0
            }
        }

    }
</script>

<style lang="less" scoped>
    .user-info{
        display: flex;
        align-items: center;
        padding-top: 10px;
        margin-left: 10px;
        .avatar{
            width: 175px;
            height: 175px;
            border-radius:50%;
            margin-right: 20px;
        }
        .info{
            .title{
                font-size: 50px;
                color: #151516;
                margin-bottom: 5px;
            }

            .medal{
                font-size: 30px;
                color: #9c9c9c;

            }
        }
    }
</style>